import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Layout, Dropdown, Menu, Avatar } from 'antd'
import { logout } from '../../utils/auth/AuthUtils'
// 高阶组件withRouter

import {
  UserOutlined
} from '@ant-design/icons'

// 解构Header
const { Header } = Layout
// 头部导航栏组件
function TopHeader () {

  // 编程式跳转
  const navigate = useNavigate()
  // 头像的下拉菜单
  const menu = (
    <Menu
      items={[
        {
          label: '超级管理员',
        },
        {
          danger: true,
          label: '退出',
          onClick: function () {   //点击事件为先清空token再重定向到登录页
            logout()
            navigate("/login")
          }
        },
      ]}
    />
  )


  // 使用hooks方法来替换类组件中的状态
  // 数组中前一个元素是状态，后一个是设置状态的方法，跟setState一样
  // 等号后面的意思是默认值是什么
  //const [collapsed, setCollapsed] = useState(false)

  return (
    <Header className="site-layout-background" style={{ padding: 0, background: '#fff' }}  >

      {/* 头部菜单右侧的内容 */}
      <div style={{ float: 'right' }}>
        <span>欢迎{localStorage.getItem("username")}</span>

        {/* 头像的下拉菜单 */}
        <Dropdown overlay={menu}>
          <Avatar size="middle" icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
}

export default TopHeader